<template>
  <div class="container">
    <div class="detail-container">
      <div class="tips-title">
        <h2>{{ post.title }}</h2>
      </div>
      <div class="article-detail">
        <p class="article-author">
          <img src="@/assets/images/avatar.png" />
          <span>{{ post.name }}</span>
          <span class="post-tag">{{ CATEGORY_MAP[post.category] }}</span>
        </p>
        <main class="article-body" v-html="post.content"></main>
      </div>
      <div class="footer">
        <div class="footer-left">
          <img src="@/assets/images/avatar.png" class="avatar" />
          <span class="author-name">{{ userStore.userInfo.username }}</span>
          <button class="follow-btn">关注</button>
        </div>
        <div class="footer-right">
          <span class="publish-time">发布于 {{ dayjs(post.createTime).format("YYYY-MM-DD HH:MM") }}</span>
          <span
            class="like-count"
            :class="{ active: post.isLike }"
            @click.stop="toggleLike(index, post.id)"
          >
            <i :class="post.isLiked ? 'fas fa-thumbs-up' : 'far fa-thumbs-up'"></i>
            {{ post.liked }}
          </span>
          <!-- :class="{ active: post.isLiked }"  true的时候添加active类 false的时候移除 -->
          <span
            class="favorite-count"
            @click="handleCommentClick"
          >
            <i class="far fa-comment"></i>
            {{ post.comments }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineEmits, onMounted } from 'vue';
import {useRoute} from "vue-router";
import dayjs from "dayjs";
import {getPostInfoAPI, toggleLikeAPI} from "@/api/post.js";
import {useUserStore} from "@/stores/userStore.js";

const route = useRoute()
const post = ref({})
const userStore = useUserStore()
const id = route.query.id
// 通过 id 来查询帖子
const getPostInfoByPostId = async () => {
  const res = await getPostInfoAPI(id)
  post.value = res.data
}
const CATEGORY_MAP = ref(['学习', '生活', '社交', '职业'])
onMounted(() => getPostInfoByPostId())

// 切换点赞
const toggleLike = (index, id) => {
  post.value.isLike = !post.value.isLike;
  post.value.liked += post.value.isLike ? 1 : -1;

  toggleLikeAPI(id)
};

const emits = defineEmits(['openDrawer']);
// 点击评论图标
const handleCommentClick = () => {
  emits('openDrawer');
};

defineExpose({
  getPostInfoByPostId
})
</script>

<style scoped>
/* 公共样式 */
.container {
  background-color: #efefef;
  padding: 20px 0 100px;
  min-height: 92vh;
}

/* 文章详情容器 */
.detail-container {
  margin: 0 auto;
  padding-bottom: 200px;
  width: 70vw;
  background-color: #ffffff;
  border-radius: 10px;
}

/* 文章标题部分 */
.tips-title {
  padding: 20px 0 0 20px;
  width: 100%;
}

/* 文章作者信息部分 */
.article-author {
  font-size: 16px;
  margin: 20px;
  display: flex;
  align-items: center;
}

.article-author img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.post-tag {
  display: inline-block;
  padding: 3px 8px;
  background: #f5f5f5; /* 浅灰色背景 */
  color: #666; /* 深灰色文字 */
  border-radius: 4px;
  font-size: 12px;
  border: 1px solid #e0e0e0; /* 更浅的边框 */
  margin-left: 10px;
}

/* 文章正文部分 */
.article-body {
  padding: 0 20px;
  font-size: 16px;
  text-indent: 35px;
  margin-bottom: 50px;
}

/* 页脚部分 */
.footer {
  position: fixed;
  bottom: 10px;
  margin: 0 auto;
  display: flex;
  height: 70px;
  width: 70vw;
  padding: 0 10px;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  border-radius: 10px;
}

/* 页脚左侧部分 */
.footer-left {
  display: flex;
  align-items: center;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 5px;
}

.author-name {
  font-size: 14px;
  margin-right: 10px;
}

.follow-btn {
  padding: 5px 10px;
  background-color: #24adf3;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

/* 页脚右侧交互项部分 */
.footer-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 30%;
  color: #8c939d;
}

/* 点赞激活状态 */
.like-count.active {
  color: #1890ff;
}

/* 统一交互效果 */
.like-count,
.favorite-count {
  cursor: pointer;
  transition: color 0.3s;
}
</style>
